<template>
    <div :class="articleMetaStyleRef">
        <img src="@/assets/img/article-meta/calendar.png" alt="">
        <span class="meta-text">发表于{{ props.articleMeta.createDate }}</span>
        <span class="meta-separator"></span>
        <img src="@/assets/img/article-meta/history.png" alt="">
        <span class="meta-text">更新于{{ props.articleMeta.updateDate }}</span>
        <span class="meta-separator"></span>
        <img src="@/assets/img/article-meta/category.png" alt="">
        <span class="meta-text">{{ categoriesRef }}</span>
        <span class="meta-separator"></span>
        <img src="@/assets/img/article-meta/tags.png" alt="">
        <span class="meta-text">{{ tagsRef }}</span>
    </div>
    <div class="article-meta" v-if="containSecondLine">
        <img src="@/assets/img/article-meta/word.png" alt="">
        <span class="meta-text">字数总计:{{ wordCountRef }}</span>
        <span class="meta-separator"></span>
        <img src="@/assets/img/article-meta/time.png" alt="">
        <span class="meta-text">阅读时长:{{props.articleMeta.readingTime}}分钟</span>
        <span class="meta-separator"></span>
        <img src="@/assets/img/article-meta/read.png" alt="">
        <span class="meta-text">阅读量:{{ readingRef }}</span>
    </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';

export interface ArticleMeta {
    createDate: string;
    updateDate: string;
    categories: String[];
    tags: String[];

    wordCount?: number;
    readingTime?: number;
    reading?: number;
}

const props = withDefaults(defineProps<{
    articleMeta?: ArticleMeta,
    containSecondLine?: boolean,
    horizontal?: 'left' | 'center'
}>(), {
    articleMeta: () => ({
        createDate: '2023-04-04',
        updateDate: '2023-04-04',
        categories: ['Digital Circuits Design'],
        tags: ['SpringBoot'],

        wordCount: 230,
        readingTime: 30,
        reading: 127
    }),
    containSecondLine: true,
    horizontal: 'center'
});

const articleMetaStyleRef = computed(() => {
    return props.horizontal === 'left' ? 'article-meta article-meta-left' : 'article-meta';
});

const categoriesRef = computed(() => props.articleMeta.categories.join(','));
const tagsRef = computed(() => props.articleMeta.tags.join(','));

const wordCountRef = computed(() => {
    if (props.articleMeta.wordCount < 1000) {
        return props.articleMeta.wordCount;
    } else if (props.articleMeta.wordCount < 10000) {
        return (props.articleMeta.wordCount / 1000).toFixed(1) + 'k';
    } else {
        return (props.articleMeta.wordCount / 10000).toFixed(1) + 'w';
    }
});

const readingRef = computed(() => {
    if (props.articleMeta.wordCount < 1000) {
        return props.articleMeta.reading;
    } else if (props.articleMeta.reading < 10000) {
        return (props.articleMeta.reading / 1000).toFixed(1) + 'k';
    } else {
        return (props.articleMeta.reading / 10000).toFixed(1) + 'w';
    }
});

</script>

<style lang="scss" scoped>

.article-meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    // background-color: salmon;

    img {
        width: 15px;
        height: 15px;
        margin-right: 4px;
    }

    .meta-text {
        font-size: 15px;
    }

    .meta-separator {
        margin: 0 6px;
        width: 2px;
        height: 12px;
        background-color: var(--text-color);
    }
}

.article-meta-left {
    justify-content: flex-start;
}
    
</style>